<template>
  <div :style="{ ...tateTextStyle, ...style }">
    <span v-if="title">{{ title }}</span>
    <span style="margin: 0 3px; ">{{ formatUnit(value, 'dr') }}</span>
    <template v-if="value">
      <icon-caret-up style=" color: '#F7313B' " v-show="value > 0" />
      <icon-caret-down style=" color: '#13C2C2'" v-show="value <= 0" />
    </template>

  </div>
</template>

<script setup>
import { formatUnit } from '@/utils/format';
const tateTextStyle = {
  display: 'inline-block',
  fontSize: '12px',
  color: '#888888',
}
const props = defineProps({
  title: {
    type: String,
  },
  style: {
    type: Object,
    default: () => ({})
  },
  value: {
    type: Number,
  }
})
</script>

<style scoped lang="less"></style>
